<script>
import {
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElLink
} from 'element-plus'
export default {
  name: 'Actions',
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElLink
  },
  props: {
    text: String,
    options: {
      type: Array,
      default: () => []
    },
    scope: {
      type: Object,
      default: () => {}
    },
    hidden: Boolean
  },
  setup(props, { attrs }) {
    return () => {
      const { text, options, scope } = props
      const config = attrs.config || {}
      return (
        <>
          {props.hidden ? (
            <el-dropdown
              trigger="click"
              {...config}
              v-slots={{
                default: () => (
                  <el-button type="primary"> {text || '...'} </el-button>
                ),
                dropdown: () => (
                  <div class="table-dropdown-wrap">
                    {options.map((o) => {
                      const { label, action, slot, ...reset } = o
                      return (
                        <el-dropdown-item key={label}>
                          <el-link
                            class="table-action-item"
                            v-slots={{
                              default: () =>
                                slot && typeof slot === 'function'
                                  ? slot() || label
                                  : label
                            }}
                            {...reset}
                            onclick={() => action(scope)}
                          >
                            {label}
                          </el-link>
                        </el-dropdown-item>
                      )
                    })}
                  </div>
                )
              }}
            ></el-dropdown>
          ) : (
            <>
              {options.map((o) => {
                const { label, action, slot, ...reset } = o
                return (
                  <el-button
                    key={label}
                    v-slots={{
                      default: () =>
                        slot && typeof slot === 'function'
                          ? slot() || label
                          : label
                    }}
                    {...reset}
                    size="mini"
                    onclick={() => action(scope)}
                  ></el-button>
                )
              })}
            </>
          )}
        </>
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.table-dropdown-wrap {
  padding: 10px 10px;
}
.table-action-item {
  width: 100px;
  &::after {
    display: none;
  }
}
</style>
